<template>
    <div>

        <div class="one">
            <p class="two">全场包邮，拼到就是赚到</p>
            <p class="three">17420人正在拼团</p>
        </div>

        <van-tabs v-model="active" swipeable @click="onClick">
            <van-tab v-for="(v, index) in obj" :title="v" :key="index">
            </van-tab>
        </van-tabs>



        <div class="pb">
            <div class="b1" v-for="(v, index) in obj1" :key="index" @click="mydetails(v.proid)">
                <img :src="v.img2" alt="">
                <p>{{ v.proname }}</p>
                <span>￥{{ v.originprice }}</span>


            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
let service = axios.create()
export default {
    data() {
        return {
            active: 0,
            obj: [],
            txt: '显卡',
            obj1: []
        }
    },
    methods: {
        
        onClick(v, v1) {
            this.obj1 = []
            service({
                url: 'http://118.178.238.19:3001/api/pro/search',
                method: 'get',
                params: {
                    keyword: v1,
                    limitNum: 20
                }
            }).then(res => {
                if (res.data.data != undefined) {
                    res.data.data.forEach(element => {
                        this.obj1.push(element)
                    });
                }
            })
        },
        fun1() {
            this.$router.push('/homepage')
        },
        mydetails(v) {
            this.$router.push({ path: '/details', query: { id: v } })
        },
    }
    ,
    mounted() {
        service({
            url: 'http://118.178.238.19:3001/api/pro/categorylist',
            method: 'get',
        }).then(res => {
            this.obj = res.data.data
        }),
            service({
                url: 'http://118.178.238.19:3001/api/pro/search',
                method: 'get',
                params: {
                    keyword: this.txt,
                    limitNum: 20
                }
            }).then(res => {

                res.data.data.forEach(element => {
                    this.obj1.push(element)
                });
                
            })
    }
}
</script>

<style scoped>
.one {
    width: 100%;
    height: 9.375rem;
    background: url(../../../assets/1.png) center /100% 100% no-repeat;
    text-align: center;
}


.two {
    color: white;
    position: absolute;
    top: 1.5625rem;
    left: 5.625rem;
    font-size: 1.25rem;

}

.three {
    color: white;
    position: absolute;
    top: 4.375rem;
    left: 9.0625rem;
    font-size: .9375rem;
}

.index {
    width: 200px;
    height: 400px;
}

.pb {
    width: 98%;
    margin: auto;
    column-count: 2;
    margin-bottom: 3.75rem;
    /* margin-top: 5px; */
    column-gap: .3125rem;
    position: relative;
    background-color: #FA4820;
    /* display: flex; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */

}

.pb .b1 {
    margin-left: 10px;
    width: 90%;
    background-color: white;
    margin-bottom: .625rem;
    border-radius: .9375rem;
    break-inside: avoid;
    text-align: center;

}

.b1 img {
    width: 90%;
    height: 40%;
    /* margin: auto; */

}

p {
    font-size: .625rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;


}

span {
    margin-left: .1875rem;
    color: red;
    font-weight: bold;
}
</style>